import { ReactNode } from 'react';

import { CourseCard, productApi } from '@/entities/course';
import { CourseDto } from '@/shared/interfaces/generated';
import { Block, Grid, Title } from '@/shared/ui/';
import cn from 'classnames';

import cs from './CourseInformation.module.scss';
import { CourseInformationLoader } from './CourseInformationLoader';

export const CourseInformation = ({
  blocks,
  course,
}: {
  blocks: { id: string; body: ReactNode }[];
  course: CourseDto;
}) => {
  const { data: courses } = productApi.useGetProductsQuery({ limit: 8 });

  if (!course)
    return (
      <div className={cs.course_info}>
        <CourseInformationLoader />
      </div>
    );
  return (
    <div className={cs.info_blocks}>
      <div className={cs.course_info}>
        {blocks
          .filter((block) => block.id !== 'speakers' || course?.product.staff?.length)
          .filter((block) => block.body !== undefined)

          .map(({ id, body }) => (
            <div id={id} key={id}>
              {body}
            </div>
          ))}
      </div>
      <div className={cn(cs.course_info, cs.zeroPad)}>
        <Block
          body={
            <Grid size="l">
              {courses?.courses
                .filter((_course) => _course?.id !== course.id)
                .slice(0, 7)
                .map(({ id, product }) => (
                  <div className={cs.card} key={id}>
                    <CourseCard
                      discount={product.discount}
                      discountPrice={product.discountPrice}
                      id={id}
                      image={product.image}
                      isTip
                      price={product.price}
                      rate={product.averageRate as unknown as number}
                      title={product.title}
                    />
                  </div>
                ))}
            </Grid>
          }
          isBigGap
          titleComponent={<Title tag="h2">Советуем</Title>}
        />
      </div>
    </div>
  );
};
